<template>
  <div class="home background-gray p-l-30 p-r-30 ">
    <el-row>
<!--      <div class="text-primary">{{ $t('Home.home')}}</div>-->
<!--      <svg-icon class="icon" icon-class="edit"></svg-icon>-->
      <div class="color-preview">

      </div>
    </el-row>
    <div class="flex justify-between m-t-30 ">
      <div
        v-for="data in chartData"
        :key="data.id"
      >
        <PieChart :chart-data="data"/>
      </div>
    </div>
    <div class="flex justify-between m-t-15">
      <div
        v-for="(lineData, index) in lineDatas"
        :key="lineData.id"
        class="flex-1"
        :class="{ 'm-l-15':  index === lineDatas.length -1}"
      >
        <lineChart
          :chart-data="lineData"
        />
      </div>
    </div>
  </div>
</template>

<script>
import PieChart from '../components/echarts/PieChart'
import LineChart from '../components/echarts/LineChart'
import { mapActions, mapState } from 'vuex'
export default {
    name: 'Home',
    components: {
        PieChart,
        LineChart
    },
    data () {
        return {
            buttonsAttrs: {
                type: 'primary',
                round: true
            },
            value: '双击测试',
            chartData: [
                {
                    value: 40,
                    chartType: 'pie',
                    type: 'edit',
                    id: 1,
                    langType: 'VirtualMachine',
                    text: ['vm', 'total'],
                    label: {
                        left: {
                            value: 25,
                            label: ['running']
                        },
                        right: {
                            value: 15,
                            label: ['stop']
                        }
                    }
                },
                {
                    value: 65,
                    type: 'home',
                    chartType: 'pie',
                    id: 2,
                    langType: 'VirtualMachine',
                    text: ['server', 'total'],
                    label: {
                        left: {
                            value: 40,
                            label: ['online']
                        },
                        right: {
                            value: 25,
                            label: ['offline']
                        }
                    }
                },
                {
                    value: 40,
                    type: 'home',
                    chartType: 'pie',
                    id: 3,
                    langType: 'VirtualMachine',
                    text: ['terminal', 'total'],
                    label: {
                        left: {
                            value: 25,
                            label: ['online']
                        },
                        right: {
                            value: 15,
                            label: ['offline']
                        }
                    }
                },
                {
                    value: 0.6,
                    chartType: 'liquidFill',
                    type: 'home',
                    id: 4,
                    langType: 'VirtualMachine',
                    text: ['disk', 'utilization'],
                    label: {
                        unit: 'TB',
                        left: {
                            value: 35,
                            label: ['used']
                        },
                        right: {
                            value: 50,
                            label: ['totalCount']
                        }
                    }
                }
            ],
            lineDatas: [
                {
                    id: 1,
                    name: ['CPU', 'utilization']
                },
                {
                    id: 2,
                    name: ['memory', 'utilization']
                }
            ]
        }
    },
    created () {
    // 测试mock
    },
    computed: {
        ...mapState('user', ['age', 'userName', 'token'])
    },
    methods: {
        ...mapActions('user', ['getUserInfo'])

    }
}
</script>
<style lang="scss" scoped>

</style>
